<template>
  <q-layout view="lHh Lpr lFf">
    <q-layout-drawer v-model="leftDrawerOpen" :content-class="$q.theme === 'mat' ? 'bg-grey-2' : null">
      <q-list no-border link inset-delimiter>
        <q-list-header>Home</q-list-header>
        <q-item @click.native="openURL('http://video.aezo.cn')">
          <q-item-side icon="school" />
          <q-item-main label="Video" sublabel="video.aezo.cn" />
        </q-item>
      </q-list>
    </q-layout-drawer>

    <q-layout-footer>
      <q-toolbar color="primary" :inverted="$q.theme === 'ios'">
        <q-toolbar-title>
          <!-- Ionicons 要有 "ion-" 前缀 -->
          <q-btn flat round dense icon="ion-flame" @click="nextFlame"/>
          <span slot="subtitle">
            发现
          </span>
        </q-toolbar-title>
        <!-- <q-toolbar-title>
          <q-btn flat round dense icon="home" />
          <span slot="subtitle">
            主页
          </span>
        </q-toolbar-title>
        <q-toolbar-title>
          <q-btn flat dense round @click="leftDrawerOpen = !leftDrawerOpen" aria-label="Menu">
            <q-icon name="menu" />
          </q-btn>
          <span slot="subtitle">
            分类
          </span>
        </q-toolbar-title>
        <q-toolbar-title>
          <q-btn flat round dense icon="person" />
          <span slot="subtitle">
            我的
          </span>
        </q-toolbar-title> -->
      </q-toolbar>
    </q-layout-footer>

    <q-page-container>
      <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" mode="out-in" :duration="300" @leave="resetScroll">
        <router-view />
      </transition>
    </q-page-container>
  </q-layout>
</template>

<script>
import { openURL } from "quasar";

export default {
  name: "LayoutDefault",
  data() {
    return {
      leftDrawerOpen: false, // this.$q.platform.is.desktop
    };
  },
  methods: {
    openURL,
    resetScroll(el, done) {
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
      done();
    },
    nextFlame() {
      this.$root.eventHub.$emit('nextFlame')
      // 使用 router 微信底部会出现返回按钮
      // this.$router.push({
      //   path: '/flame?nextFlame=true&_time=' + new Date().getTime()
      // })
    }
  },
  created() {
    // console.log(this.$q);
  }
};
</script>

<style>
.q-layout-page {
  padding-top: 0;
}
.q-toolbar {
  text-align: center;
}
</style>
